<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>示例信息查询</title>
<style type="text/css">
  form {
    display: inline;
  }
  table {
    border-collapse: collapse;
    border: black solid 1px;
  }
  th, td {
    border: 1px solid;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 150px;
  }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.js"></script>
<script type="text/javascript">
  function xhr_write(params) {
    return {
      url: params.url,
      method: "POST",
      headers: {
        "content-type": "application/x-www-form-urlencoded"
      },
      data: params.data,
      success: params.success
    }
  }
</script>
</head>
<body>
<div align="center">
<fieldset>
  <legend>添加数据</legend>
  <form name="add-form">
    <input type="text" name="param" placeholder="唯一值">
    <button type="button" onclick="add()">提交</button>
    <script type="text/javascript">
      function add() {
        // 获取name属性值为add-form的form元素的第一个子元素的值
        const param = $("form[name='add-form']>input:first-child");
        $.ajax(xhr_write({
          url: 'add',
          data: {
            "param": param.val()
          },
          success: function () {
            param.val("");
          }
        }));
      }
    </script>
  </form>
</fieldset>
  <form name="query-form">
    <input type="text" name="kw" placeholder="关键词">
    <button type="button" onclick="kwq()">查询</button>
    <script type="text/javascript">
      var index, total;
      // 如果请求成功，即响应码为200
      function suc(data) {
        // 从响应返回的数据（data）中得到index属性的值，并将index属性的值赋予id为page-index的元素
        index = data.index;
        $("#page-index").text(index);
        // 将属性recordTotal的值赋予id为page-record-total的元素
        $("#page-record-total").text(data.recordTotal);
        // 得到total属性的值
        total = data.total;
        // 将total属性的值赋予id为page-total的元素
        $("#page-total").text(total);
        /* 如果此页面刷新，那么获取下拉菜单中的所有下拉选项
        var options = $("#page-size>option");
        for (var option of options) {
          将得到的size属性的值与option的value属性值作比较，如果相等则选中此option
          if (option.val() == data.size) {
            option.prop("selected", true);
          }
        } */
        var ppi = $("#previous-page-index");
        var flag = (total <= 1 || index <= 1) ? true : false;
        ppi.prop("disabled", flag);
        var npi = $("#next-page-index");
        flag = index >= total ? true : false;
        npi.prop("disabled", flag);
        // 得到data属性的值，该值是一个List对象
        var list = data['data'];
        if (data.size > 0) {
          var line_id = 0, td_id = 0;
          var table = $("#page-table");
          for (var object of list) {
            line_id += 1;
            var tr = $("<tr></tr>");
            tr.attr("id", "tr" + line_id);
            table.append(tr);
            for (var num = 0; num < 3; num++) {
              td_id += 1;
              var td = $("<td></td>");
              td.attr("id", "td" + td_id);
              tr.append(td);
            }
            $("#tr" + line_id + ">td:nth-of-type(1)").text(object.field1);
            // 定义修改数据的表单
            var frm_mod = $("<form></form>");
            frm_mod.attr("id", "form" + line_id);
            // 定义修改数据的隐藏字段key
            var hid_inp = $("<input></input>");
            hid_inp.attr("type", "hidden");
            hid_inp.attr("name", "key");
            hid_inp.attr("value", object.field1);
            hid_inp.prop("readonly", true);
            // 向用于修改数据的表单中添加隐藏字段key
            frm_mod.append(hid_inp);
            // 定义修改数据的字段unique_value
            var inp = $("<input></input>");
            inp.attr("type", "text");
            inp.attr("name", "unique_value");
            inp.attr("value", object.field2);
            // 向用于修改数据的表单中添加字段unique_value
            frm_mod.append(inp);
            // 添加修改表单
            $("#tr" + line_id + ">td:nth-of-type(2)").append(frm_mod);
            // 定义修改按钮
            var mod_btn = $("<button type='button'></button>");
            // 添加修改按钮
            $("#tr" + line_id + ">td:nth-of-type(3)").append(mod_btn);
            mod_btn.on("click", function () {
              // 获取mod_btn按钮的祖父元素
              tr = $(this).parent().parent();
              // 截取id属性值中第三位至末位组成新字符串
              var id = tr.attr("id").substring(2);
              children = $("form[id='form" + id + "']").children();
              $.ajax(xhr_write({
                url: 'modify',
                data: {
                  "key": $(children.get(0)).val(),
                  "unique_value": $(children[1]).val()
                },
                success: function () {
                  nkwq();
                }
              }));
            });
            mod_btn.text("修改");
            // 定义删除数据的表单
            var frm_rem = $("<form></form>");
            // 定义删除数据的隐藏字段id
            hid_inp = $("<input></input>");
            hid_inp.attr("type", "hidden");
            hid_inp.attr("name", "id");
            hid_inp.attr("value", object.field1);
            // 向用于删除数据的表单中添加隐藏字段id
            frm_rem.append(hid_inp);
            var rem_btn = $("<button type='button'></button>");
            rem_btn.click(function () {
              // 获取mod_btn按钮的祖父元素
              tr = $(this).parent().parent().parent();
              // 截取id属性值中第三位至末位组成新字符串
              var id = tr.attr("id").substring(2);
              children = $("form[id='form" + id + "']").children();
              $.ajax(xhr_write({
                url: 'remove',
                data: {
                  "id": $(children.get(0)).val()
                },
                success: function () {
                  kwq();
                }
              }));
            });
            rem_btn.text("删除");
            frm_rem.append(rem_btn);
            // 添加删除表单
            $("#tr" + line_id + ">td:nth-of-type(3)").append(frm_rem);
          }
        }
      }
      var pt, kw;
      function kwq() {
        pt = $("#page-table");
        pt.children().remove();
        // 获取父元素为name属性值为query-form的form元素的第一个同级input元素
        kw = $("form[name='query-form']>input:nth-of-type(1)").val();
        const size = $("#page-size").val();
        $.ajax({
          url: "query",
          method: 'POST',
          data: {
            "kw": kw,
            "siz": size
          },
          dataType: "json",
          success: function (page) {
            suc(page);
          }
        })
      }
      function nkwq() {
        pt = $("#page-table");
        pt.children().remove();
        const size = $("#page-size").val();
        $.ajax({
          url: "query",
          method: 'POST',
          data: {
            "kw": kw,
            "siz": size,
            "ind": index
          },
          dataType: "json",
          success: function (page) {
            suc(page);
          }
        })
      }
    </script>
  </form>
  <%-- <jsp:useBean id="page" class="bean.Page" scope="page" />
  <c:set var="page" value="${requestScope.page}" scope="page" /> --%>
  <!-- 每个页面的容量最小值是10，最大是50 -->
  <div id="page-property">
    第<span id="page-index">0</span>页，共<span id="page-total">0</span>页
    <button id="previous-page-index" type="button" onclick="ppi()" disabled>上一页</button>
    <button id="jump-page-index" type="button" onclick="jpi()">跳转</button>至
    第<input type="text" id="new-page-index" style="width: 25px">页
    <button id="next-page-index" type="button" onclick="npi()" disabled>下一页</button>
    本次查询共找到<span id="page-record-total">0</span>条相关记录
  </div>
  <script type="text/javascript">
    var pp = $("#page-property");
    var select = $("<select id='page-size'></select>");
    for (var i = 1; i <= 5; i++) {
      select.append("<option value='" + 10 * i + "'>" + 10 * i + "条" + "</option>");
    }
    $(select).change(function () {
      index = 1;
      // 如果选择的项发生变化则执行查询
      nkwq();
    });
    pp.prepend(select);
    pp.prepend("每页显示");
    function ppi() {
      if (index != null && index != "") {
        index -= 1;
        nkwq();
      }
    }
    function jpi() {
      index = $("#new-page-index").val();
      nkwq();
    }
    function npi() {
      if (index != null && index != "") {
        index += 1;
        nkwq();
      }
    }
  </script>
  <table>
    <tr>
      <th>字段1</th>
      <th>字段2</th>
      <th>操作</th>
    </tr>
    <tr>
      <td colspan="3">
        <table id="page-table"></table>
      </td>
    </tr>
  </table>
</div>
</body>
</html>
